<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="shape.css">
    <title>shape by CSS</title>
    <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 80%;
            margin: 0 auto;
            background: #ddd;
            padding-bottom: 50px;
        }
        .container div{
            margin-top: 0px;
            margin-bottom: 15px;
            margin-left: 270px;
        }
        .container li{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <li>square</li>
        <div id="square"></div>
        <li>rectangle</li>
        <div id="rectangle"></div>
        <li>circle</li>
        <div id="circle"></div>
        <li>oval</li>
        <div id="oval"></div>
        <li>triangle-up</li>
        <div id="triangle-up"></div>
        <li>triangle-down</li>
        <div id="triangle-down"></div>
        <li>triangle-left</li>
        <div id="triangle-left"></div>
        <li>triangle-right</li>
        <div id="triangle-right"></div>
        <li>triangle-topleft</li>
        <div id="triangle-topleft"></div>
        <li>triangle-topright</li>
        <div id="triangle-topright"></div>
        <li>triangle-bottomleft</li>
        <div id="triangle-bottomleft"></div>
        <li>triangle-bottomright</li>
        <div id="triangle-bottomright"></div>
        <li>curvedarrow</li>
        <div id="curvedarrow"></div>
        <li>trapezoid</li>
        <div id="trapezoid"></div>
        <li>parallelogram</li>
        <div id="parallelogram"></div>
        <li>star-six</li>
        <div id="star-six"></div>
        <li>star-five</li>
        <div id="star-five"></div>
        <li>pentagon</li>
        <div id="pentagon"></div>
        <li>hexagon</li>
        <div id="hexagon"></div>
        <li>octagon</li>
        <div id="octagon"></div>
        <li>heart</li>
        <div id="heart"></div>
        <li>infinity</li>
        <div id="infinity"></div>
        <li>diamond</li>
        <div id="diamond"></div>
        <li>diamond-shield</li>
        <div id="diamond-shield"></div>
        <li>diamond-narrow</li>
        <div id="diamond-narrow"></div>
        <li>cut-diamond</li>
        <div id="cut-diamond"></div>
        <li>egg</li>
        <div id="egg"></div>
        <li>pacman</li>
        <div id="pacman"></div>
        <li>talkbubble</li>
        <div id="talkbubble"></div>
        <li>burst-12</li>
        <div id="burst-12"></div>
        <li>burst-8</li>
        <div id="burst-8"></div>
        <li>yin-yang</li>
        <div id="yin-yang"></div>
        <li>badge-ribbon</li>
        <div id="badge-ribbon"></div>
        <li>tv</li>
        <div id="tv"></div>
        <li>chevron</li>
        <div id="chevron"></div>
        <li>magnifying-glass</li>
        <div id="magnifying-glass"></div>
        <li>moon</li>
        <div id="moon"></div>
        <li>flag</li>
        <div id="flag"></div>
        <li>cone</li>
        <div id="cone"></div>
        <li>cross</li>
        <div id="cross"></div>
        <li>base</li>
        <div id="base"></div>
        <li>pointer</li>
        <div id="pointer"></div>
        <li>lock</li>
        <div id="lock"></div>
        <li>space-invader</li>
        <div id="space-invader"></div>
    </div>
</body>
</html>